<template>
  <div id="test">
    <el-upload
      class="upload"
      drag
      :on-success="handleAvatarSuccess"
      :action="uploadUrl"
      :before-upload="andleAvatarSuccess"
    >
      <span class="box_text">导入</span>
    </el-upload>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { uploadUrl } from "./config/config";

//上传文件之前先判断该文件是否是Excel文件
const andleAvatarSuccess = (file) => {
  console.log(file);
  const Xls = file.name.split(".");
  if (Xls[1] === "xls" || Xls[1] === "xlsx" || Xls[1] === "csv") {
    // ElMessage.success("正在上传！");
    return file;
  } else {
    ElMessage.error("请上传excel格式的文件!");
    return false;
  }
};
// 上传的回调
const handleAvatarSuccess = (res) => {
  // console.log(res);
  if (res == true) {
    state.innerVisible = true;
    methods.getDetails();
    ElMessage.success("导入成功");
  } else {
    ElMessage.warning("导入失败");
  }
};
</script>
<style lang="scss" scoped>
#test {
  width: 500px;
  height: 500px;
  margin: 100px auto;
}
</style>
